<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <v-btn color="success" @click="getData()">调取后台数据</v-btn>
    <v-btn color="error" @click="callCommonData()">Error</v-btn>
    <v-btn color="warning" @click="sendMsg()">组件通讯</v-btn>
    <v-btn color="info">Info</v-btn>
  </div>
</template>

<script>
// import axios from 'axios'
import bus from '@/bus'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App 123'
    }
  },
  methods: {
    getData: function () {
      this.setToken('1234321')
      // axios({
      //   method: 'post',
      //   url: '/v1/base_system/canteens',
      //   data: {
      //     firstName: 'Fred',
      //     lastName: 'Flintstone'
      //   }
      // }).then(function (response) {
      //   console.log(response)
      //   console.log(response.data)
      // }).catch(function (error) {
      //   console.log(error)
      // })
    },
    callCommonData: function () {
      console.log(this.getToken())
    },
    // 发送信息组件
    // 1.引入bus
    // 2.在动作事件中触发传递函数，bus.$emit(dataName,data)
    sendMsg: function () {
      console.log(123)
      bus.$emit('bus-send', '通讯成功')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
}
a {
  color: #42b983;
}
</style>
